<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '../stores/counter'
import { EmployeeService } from '@/api/employee'
import { ApiWrapper, FormatUtils } from '@/api/utils'

const router = useRouter()
const counter = useCounterStore()

// 酒店管理系统数据
const hotelInfo = ref({
  name: '星级酒店管理系统',
  version: '1.0.0',
  description: '基于Vue3 + TailwindCSS + Spring Boot的现代化酒店管理解决方案'
})

const systemModules = ref([
  {
    id: 1,
    name: '员工管理',
    description: '员工信息录入、修改、查询和权限管理',
    icon: '👥',
    status: '已完成',
    path: '/employees/list',
    features: ['员工信息管理', '权限分配', '考勤管理']
  },
  {
    id: 2,
    name: '房间管理',
    description: '房型设置、房间状态管理和价格配置',
    icon: '🏨',
    status: '开发中',
    path: '/rooms/list',
    features: ['房型管理', '房间状态', '价格设置']
  },
  {
    id: 3,
    name: '入住管理',
    description: '客人入住登记、退房和账单管理',
    icon: '🛎️',
    status: '规划中',
    path: '/checkin/register',
    features: ['快速入住', '退房管理', '账单生成']
  },
  {
    id: 4,
    name: '数据统计',
    description: '营收报表、入住率统计和数据分析',
    icon: '📊',
    status: '规划中',
    path: '/reports/revenue',
    features: ['营收报表', '入住率统计', '数据导出']
  }
])

const apiStatus = ref({
  backend: '连接中...',
  database: '连接中...',
  lastUpdate: new Date().toLocaleString()
})

// 统计数据
const stats = ref({
  totalEmployees: 0,
  activeEmployees: 0,
  totalRooms: 156,
  occupiedRooms: 89,
  todayRevenue: 45680,
  monthlyRevenue: 1234567
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'employee',
    action: '新增员工',
    description: '张三已完成入职手续',
    time: new Date(Date.now() - 30 * 60 * 1000),
    icon: '👤'
  },
  {
    id: 2,
    type: 'room',
    action: '房间清洁',
    description: '101房间清洁完成',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000),
    icon: '🧹'
  },
  {
    id: 3,
    type: 'checkin',
    action: '客人入住',
    description: '李四入住豪华套房',
    time: new Date(Date.now() - 4 * 60 * 60 * 1000),
    icon: '🛎️'
  }
])

// 测试API连接
const testApiConnection = async () => {
  try {
    // 尝试获取员工统计信息来测试后端连接
    const employeeStats = await EmployeeService.getEmployeeStats()
    stats.value.totalEmployees = employeeStats.total
    stats.value.activeEmployees = employeeStats.active

    apiStatus.value.backend = '✅ 后端服务正常'
    apiStatus.value.database = '✅ 数据库连接正常'
  } catch (error) {
    apiStatus.value.backend = '❌ 后端服务异常'
    apiStatus.value.database = '❌ 数据库连接失败'
    console.error('API连接测试失败:', error)
  }
  apiStatus.value.lastUpdate = new Date().toLocaleString()
}

// 导航到模块
const navigateToModule = (module: any) => {
  if (module.status === '已完成') {
    router.push(module.path)
  }
}

onMounted(() => {
  testApiConnection()
})
</script>

<template>
  <div class="space-y-6 lg:space-y-8">
    <!-- 欢迎横幅 -->
    <div class="bg-gradient-warm rounded-xl sm:rounded-2xl p-4 sm:p-8 xl:p-12 2xl:p-16 text-white">
      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 xl:gap-8">
        <div class="flex-1">
          <h1 class="text-2xl sm:text-3xl xl:text-4xl 2xl:text-5xl font-bold mb-2 xl:mb-4">{{ hotelInfo.name }}</h1>
          <p class="text-warm-100 text-base sm:text-lg xl:text-xl mb-1 xl:mb-2">版本 {{ hotelInfo.version }}</p>
          <p class="text-warm-200 text-sm sm:text-base xl:text-lg">{{ hotelInfo.description }}</p>
        </div>
        <div class="text-4xl sm:text-6xl xl:text-7xl 2xl:text-8xl opacity-80 self-center sm:self-auto">🏨</div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-6 gap-4 lg:gap-6 xl:gap-8">
      <div class="card bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-blue-600">总员工数</p>
            <p class="text-2xl font-bold text-blue-900">{{ stats.totalEmployees }}</p>
            <p class="text-xs text-blue-500">在职: {{ stats.activeEmployees }}</p>
          </div>
          <div class="text-3xl text-blue-500">👥</div>
        </div>
      </div>

      <div class="card bg-gradient-to-br from-green-50 to-green-100 border-green-200">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-green-600">房间入住率</p>
            <p class="text-2xl font-bold text-green-900">{{ Math.round((stats.occupiedRooms / stats.totalRooms) * 100) }}%</p>
            <p class="text-xs text-green-500">{{ stats.occupiedRooms }}/{{ stats.totalRooms }}</p>
          </div>
          <div class="text-3xl text-green-500">🏠</div>
        </div>
      </div>

      <div class="card bg-gradient-to-br from-yellow-50 to-yellow-100 border-yellow-200">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-yellow-600">今日营收</p>
            <p class="text-2xl font-bold text-yellow-900">¥{{ stats.todayRevenue.toLocaleString() }}</p>
            <p class="text-xs text-yellow-500">较昨日 +12%</p>
          </div>
          <div class="text-3xl text-yellow-500">💰</div>
        </div>
      </div>

      <div class="card bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-purple-600">月度营收</p>
            <p class="text-2xl font-bold text-purple-900">¥{{ (stats.monthlyRevenue / 10000).toFixed(1) }}万</p>
            <p class="text-xs text-purple-500">较上月 +8%</p>
          </div>
          <div class="text-3xl text-purple-500">📈</div>
        </div>
      </div>
    </div>

    <!-- 系统状态 -->
    <div class="card">
      <div class="card-header">
        <h2 class="text-xl font-semibold text-gray-900">系统状态</h2>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="flex items-center space-x-3">
          <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
          <div>
            <p class="font-medium text-gray-900">后端服务</p>
            <p class="text-sm text-gray-600">{{ apiStatus.backend }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-3">
          <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
          <div>
            <p class="font-medium text-gray-900">数据库</p>
            <p class="text-sm text-gray-600">{{ apiStatus.database }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-3">
          <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
          <div>
            <p class="font-medium text-gray-900">最后更新</p>
            <p class="text-sm text-gray-600">{{ apiStatus.lastUpdate }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能模块 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6 xl:gap-8">
      <!-- 功能模块卡片 -->
      <div class="lg:col-span-2">
        <div class="card">
          <div class="card-header">
            <h2 class="text-xl font-semibold text-gray-900">系统功能模块</h2>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4 lg:gap-6">
            <div
              v-for="module in systemModules"
              :key="module.id"
              :class="[
                'p-6 rounded-xl border-2 transition-all duration-300 cursor-pointer',
                module.status === '已完成'
                  ? 'border-green-200 bg-green-50 hover:border-green-300 hover:shadow-lg'
                  : 'border-gray-200 bg-gray-50 hover:border-gray-300'
              ]"
              @click="navigateToModule(module)"
            >
              <div class="text-center mb-4">
                <div class="text-4xl mb-2">{{ module.icon }}</div>
                <h3 class="text-lg font-semibold text-gray-900">{{ module.name }}</h3>
              </div>
              <p class="text-sm text-gray-600 mb-4 text-center">{{ module.description }}</p>
              <div class="text-center mb-4">
                <span :class="[
                  'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium',
                  module.status === '已完成' ? 'bg-green-100 text-green-800' :
                  module.status === '开发中' ? 'bg-yellow-100 text-yellow-800' :
                  'bg-gray-100 text-gray-800'
                ]">
                  {{ module.status }}
                </span>
              </div>
              <ul class="space-y-1">
                <li v-for="feature in module.features" :key="feature"
                    class="text-xs text-gray-500 flex items-center">
                  <span class="w-1 h-1 bg-primary-500 rounded-full mr-2"></span>
                  {{ feature }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近活动 -->
      <div>
        <div class="card">
          <div class="card-header">
            <h2 class="text-xl font-semibold text-gray-900">最近活动</h2>
          </div>
          <div class="space-y-4">
            <div v-for="activity in recentActivities" :key="activity.id"
                 class="flex items-start space-x-3 p-3 rounded-lg hover:bg-warm-25 transition-colors duration-200">
              <div class="text-2xl">{{ activity.icon }}</div>
              <div class="flex-1">
                <p class="text-sm font-medium text-gray-900">{{ activity.action }}</p>
                <p class="text-xs text-gray-600">{{ activity.description }}</p>
                <p class="text-xs text-gray-400 mt-1">{{ FormatUtils.formatDate(activity.time, 'HH:mm') }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="card">
      <div class="card-header">
        <h2 class="text-xl font-semibold text-gray-900">快速操作</h2>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-3 lg:gap-4">
        <button class="btn-secondary flex items-center justify-center space-x-2" @click="testApiConnection">
          <span>🔄</span>
          <span>测试连接</span>
        </button>
        <router-link to="/employees/list" class="btn-primary flex items-center justify-center space-x-2">
          <span>👥</span>
          <span>员工管理</span>
        </router-link>
        <router-link to="/rooms/list" class="btn-secondary flex items-center justify-center space-x-2">
          <span>🏠</span>
          <span>房间管理</span>
        </router-link>
        <router-link to="/reports/revenue" class="btn-secondary flex items-center justify-center space-x-2">
          <span>📊</span>
          <span>数据报表</span>
        </router-link>
      </div>
    </div>

    <!-- 技术栈信息 -->
    <div class="card">
      <div class="card-header">
        <h2 class="text-xl font-semibold text-gray-900">技术栈</h2>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 lg:gap-6">
        <div class="text-center p-4 bg-blue-50 rounded-lg">
          <div class="text-2xl mb-2">⚡</div>
          <h4 class="font-medium text-gray-900 mb-1">前端</h4>
          <p class="text-sm text-gray-600">Vue 3 + TypeScript + TailwindCSS</p>
        </div>
        <div class="text-center p-4 bg-green-50 rounded-lg">
          <div class="text-2xl mb-2">🚀</div>
          <h4 class="font-medium text-gray-900 mb-1">后端</h4>
          <p class="text-sm text-gray-600">Spring Boot + MyBatis</p>
        </div>
        <div class="text-center p-4 bg-yellow-50 rounded-lg">
          <div class="text-2xl mb-2">🗄️</div>
          <h4 class="font-medium text-gray-900 mb-1">数据库</h4>
          <p class="text-sm text-gray-600">MySQL 8.0</p>
        </div>
        <div class="text-center p-4 bg-purple-50 rounded-lg">
          <div class="text-2xl mb-2">🛠️</div>
          <h4 class="font-medium text-gray-900 mb-1">工具</h4>
          <p class="text-sm text-gray-600">Vite + Maven + ESLint</p>
        </div>
      </div>
    </div>
  </div>
</template>


